
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
import * as echarts from 'echarts/core';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart, LineChart, PictorialBarChart } from 'echarts/charts';
import { useCallback, useEffect, useRef, useState } from 'react';
import type { EChartsOption } from 'echarts';
import { PieChart } from 'echarts/charts';
echarts.use([TooltipComponent,GridComponent, CanvasRenderer, UniversalTransition, LineChart, LegendComponent, PieChart, BarChart, PictorialBarChart]);



type MyOption = EChartsOption
type EchartsMainProps = {
  option: MyOption,
  isNotDefault?: boolean
}


const EchartsMain = ({ option, isNotDefault = false }: EchartsMainProps) => {

  const chartDom = useRef<HTMLDivElement>(null)


  const [myChar, setMyChar] = useState<echarts.ECharts>()




  const init = useCallback(() => {


    const optionDefault: EChartsOption = {
      legend: {
        left: 'right',
        textStyle: {
          color: 'rgba(197, 227, 255, 0.9)',
          fontStyle: 'normal',
          fontWeight: 400,
          fontFamily: 'Courier New',
          fontSize: 12,
          textShadowColor: 'rgba(0, 0, 0, 0.25)'
        },
      },
      grid: {
        top: '30px',
        left: '30px',
        bottom: '30px',
        right: '20px'
      },
      xAxis: {
        type: 'category',
        axisTick: {
          show: false
        },
        boundaryGap: false,
        axisLabel: {
          fontFamily: 'Courier New',
          color: 'rgba(197, 227, 255, 0.9)'
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(24, 144, 255, 0.3)',
            width: 0,
            shadowColor: 'rgba(24, 144, 255, 0.3)',
          }
        },
        axisPointer: {
          show: true,
          type: 'line',
          lineStyle: {
            color: 'rgba(213,234,254,0.4)'
          },
          label: {
            backgroundColor: 'rgba(24, 144, 255, 0.4)',
            fontFamily: 'Courier New',
          },
        }
      },
      yAxis: {
        type: 'value',
        axisPointer: {
          show: true,
          type: 'line',
          lineStyle: {
            color: 'rgba(213,234,254,0.4)'
          },
          label: {
            precision: 0,
            backgroundColor: 'rgba(24, 144, 235, 0.6)',
            fontFamily: 'Courier New',
          },
        },
        axisLabel: {
          color: 'rgba(197, 227, 255, 0.8)',
          fontFamily: 'Courier New',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(24, 144, 255, 0.2)'
          }
        }
      },

    };
    const MyChar_init = echarts.init(chartDom.current)


    if (!isNotDefault) {
      MyChar_init.setOption(optionDefault)
    }

    setMyChar(MyChar_init)
  }, [])


  useEffect(() => {
    init()
  }, [init])


  const setDataSoruce = useCallback(() => {
    if (!myChar || !option) return
    myChar.setOption(option)
  }, [option, myChar])


  useEffect(() => { setDataSoruce() }, [setDataSoruce])

  return <div className="w-full h-full" ref={chartDom}></div>
}

export default EchartsMain